<template>
	<view class="detailsPage paper surnameOrigin customTitleBar" :style="{borderTopWidth:statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar tabs-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<text class="tabs-item" @click="toHundredFamilySurnames">百家姓</text>
			<text class="tabs-item" @click="toPaper">论文</text>
			<text class="tabs-item" @click="toCase">案例</text>
			<text class="tabs-item selected" @click="toSurnameOrigin">姓氏来源</text>
		</view>
		<view class="search-bar">
			<view class="search-form">
				<input type="text" placeholder="搜索关键字查询" v-model="searchInput" confirm-type="search" @confirm="">
				<view class="btn-clear" @click.stop="clearInput" v-show="searchInput !=''">清除</view>
			</view>
		</view>
		<view class="container-wrap">
			<view class="container">
				<!-- 暂无内容s -->
				<view class="no-data">
					<image src="/static/img/icon_no_data.jpg" class="icon-no-data"></image>
					<view class="title">暂时没有内容</view>
				</view>
				<!-- 暂无内容e -->
				<view class="header-title" style="display: none;">　　第一种人AB型性状显性来源炎帝时代最早人物：</view>
				<view class="list" style="display: none;">
					<view class="list-item">
						<view class="surname">高</view>
						<view class="content">
							<view class="title">AB型性状显性<view class="rate"><uni-rate :readonly="true" :value="5" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">炎帝之后齐太公之七世孙名公子高，他的子孙以高为姓。现有人口1060万人。颅骨判断高生人符合AB显性。</view>
						</view>
					</view>
					<view class="list-item">
						<view class="surname">谢</view>
						<view class="content">
							<view class="title">AB型性状显性<view class="rate"><uni-rate :readonly="true" :value="4" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">周宣王舅父申侯，封于谢他的子孙便以谢为姓。现有人口702万人。颅骨判断谢姓人符合AB显性。</view>
						</view>
					</view>
					<view class="list-item">
						<view class="surname">董</view>
						<view class="content">
							<view class="title">AB型性状显性<view class="rate"><uni-rate :readonly="true" :value="3" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">虞时有董父事舜，帝赐姓董。现有人口599万人。颅骨判断董姓人符合AB显性。</view>
						</view>
					</view>
					<view class="list-item">
						<view class="surname">吕</view>
						<view class="content">
							<view class="title">AB型性状显性<view class="rate"><uni-rate :readonly="true" :value="5" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">炎帝后代伯夷封于吕，他的子孙以此为吕性，现有人口593万人。颅骨判断谢姓人符合AB显性。</view>
						</view>
					</view>
					<view class="list-item">
						<view class="surname">卢</view>
						<view class="content">
							<view class="title">AB型性状显性<view class="rate"><uni-rate :readonly="true" :value="4" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">齐太公的裔孙溪，封于卢他的子孙便以卢为姓。现有人口447万人。颅骨判断谢姓人符合AB显性。</view>
						</view>
					</view>
					<view class="list-item">
						<view class="surname">丁</view>
						<view class="content">
							<view class="title">AB型性状显性<view class="rate"><uni-rate :readonly="true" :value="5" :size="14" activeColor="#00BD8D" :margin="2" /></view></view>
							<view class="body">ab型性状显性。齐太公吕淌之子吕汲谥丁公，他的子孙便以丁为姓。显有人口400万人。颅骨判断谢姓人符合AB显性。</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				customTitleBarBg: 'rgba(250,250,250,1)',
				statusBarHeight: statusBarHeight,
				searchInput: '',
			}
		},
		methods: {
			clearInput() {
				this.searchInput = '';
			},
			toHundredFamilySurnames() {
				uni.redirectTo({
					url: '../hundredFamilySurnames/hundredFamilySurnames',
				});
			},
			toCase() {
				uni.redirectTo({
					url: '../case/case',
				});
			},
			toPaper() {
				uni.redirectTo({
					url: '../paper/paper',
				});
			},
			toSurnameOrigin() {
				uni.redirectTo({
					url: '../surnameOrigin/surnameOrigin',
				});
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toPersonalCenter() {
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				});
			},
			
		}
	}
</script>

<style>
	page{background-color: #fff;}
</style>